<template>
  <div class="data-page">
    <!-- <dheader></dheader> -->
    <topnav></topnav>
    <div class="data-content">
      <div class="data-main">
        <mainmap/>
        <transition name="el-zoom-in-center">
          <div class="main-left" v-if="isshowaround">
            <dleft></dleft>
          </div>
        </transition>
        <transition name="el-fade-in-linear">
          <div class="main-center-bottom" v-if="isshowaround">
            <dcontent></dcontent>
          </div>
        </transition>
        <!-- <transition name="el-fade-in-linear">
          <div class="main-center-header" v-if="isshowaround">
            <dcontent></dcontent>
          </div>
        </transition> -->
        <transition name="el-zoom-in-center">
          <div class="main-right" v-if="isshowaround">
            <dright></dright>
          </div>
        </transition>
      </div>
    </div>
    <nouser :isShow="isShow" v-if="isShow"></nouser>
    <loading v-if="pageShow"></loading>
  </div>
</template>

<script>
import dheader from "./dheader";
import dleft from "./dleft";
import dcontent from "./dcontent";
import dright from "./dright";
import mainmap from "./mainmap";

export default {
  components: {
    mainmap,
    dheader,
    dleft,
    dcontent,
    dright
  },
  data() {
    return {
      isShow: false,
      pageShow: true,
      personalData: {},
      numberData: {},
      username: "",
      isshowaround: true
    };
  },
  created() {
    // let username = this.$route.params.user
    this.getData("sdfsdf");
  },
  methods: {
    showaround() {
      this.isshowaround = !this.isshowaround;
    },

    getData(username) {
      this.pageShow = false;
    }
    //计算年月
    //	joindate(sinceDate){
    //      var since = sinceDate.getFullYear();
    //      var sinceMonth = sinceDate.getMonth();
    //      return since + "-" + sinceMonth
    //	}
  }
};
</script>

<style lang="scss">
// .chart{
// height: calc(100% -20px);
// }

.data-page {
  // background: url(../../assets/data/true.png) repeat;
  background-color: #12136F;
  top: 0;
  right: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  min-width: 1220px;
  .data-content {
    padding: 20px;
    height: 100%;
    .data-main {
      // width: calc(100% - 40px);
      position: relative;
      margin-top: 0px;
      // margin-bottom: 40px;
      // margin-left: 20px;
      // margin-right: 20px;
      // height: calc(100% - 75px);
      height: 100%;

      .main-left {
        height: 100%;
        width: 20%;
        float: left;
      }
      .main-center-header {
        float: left;
        height: 100%;
        width: 60%;
        padding: 1%;
      }
      .main-center-bottom {
        float: left;
        height: 100%;
        width: 60%;
        padding: 1%;
      }
      .main-right {
        float: right;
        width: 20%;
        height: 100%;
      }
    }
  }
}
</style>